<template>
    <div class="ChangeForm">
        <Row>
            <Form ref="formValidate" :model="formValidate.condition" :label-width="80">
                <Col span="24">
                    <Row>
                        <Col :xs="24" :md="12" :lg="8">
                            <FormItem label="年月" prop="gradeDateStr8">
                                <DatePicker
                                    type="date"
                                    clearable
                                    format="yyyy-MM-dd"
                                    placeholder
                                    v-model="formValidate.condition.gradeDateStr8"
                                    class="w200"
                                ></DatePicker>
                            </FormItem>
                        </Col>
                        <Col :xs="24" :md="12" :lg="8">
                            <FormItem label="客户经理" prop="customerManager">
                                <Input clearable v-model="formValidate.condition.customerManager" placeholder
                                       class="w200"/>
                            </FormItem>
                        </Col>
                        <Col :xs="24" :md="12" :lg="8">
                            <FormItem label="评级等级" prop="modelValue">
                                <!--                                <Select v-model="formValidate.condition.modelValue" placeholder clearable class="w200">-->
                                <!--                                    <Option v-for="(item,index) in dataDict.modelValueDict" :key="index"-->
                                <!--                                            :value="item.value">{{ item.title }}-->
                                <!--                                    </Option>-->
                                <!--                                </Select>-->
                                <Select v-model="formValidate.condition.modelValue" clearable placeholder
                                        class="w200">
                                    <Option v-for="(item,index) in modelValueDict" :key="index" :value="item.value">
                                        {{ item.title }}
                                    </Option>
                                </Select>
                            </FormItem>
                        </Col>
                        <Col :xs="24" :md="12" :lg="8">
                            <FormItem label="合作商名称" prop="channelFullName">
                                <Input clearable v-model="formValidate.condition.channelFullName" placeholder
                                       class="w200"/>
                            </FormItem>
                        </Col>
                        <Col :xs="24" :md="12" :lg="8">
                            <FormItem label="合作商编号" prop="channelCode">
                                <Input clearable v-model="formValidate.condition.channelCode" placeholder class="w200"/>
                            </FormItem>
                        </Col>
                        <Col :xs="24" :md="12" :lg="8">
                            <FormItem label="业务类型" prop="businessType">
                                <Select v-model="formValidate.condition.businessType" clearable placeholder
                                        class="w200">
                                    <Option v-for="(item,index) in dataDict.businessTypeDict" :key="index"
                                            :value="item.value">{{ item.title }}
                                    </Option>
                                </Select>

                            </FormItem>
                        </Col>
                        <Col :xs="24" :md="12" :lg="8">
                            <FormItem label="分数范围">
                                <div class="w200 scoreRange">
                                    <InputNumber v-model="formValidate.condition.scoreStart"></InputNumber>
                                    <span>~</span>
                                    <InputNumber v-model="formValidate.condition.scoreEnd"></InputNumber>
                                </div>
                            </FormItem>
                        </Col>
                        <Col :xs="24" :md="12" :lg="8">
                            <FormItem label="渠道归属" prop="channelBelong">
                                <Select v-model="formValidate.condition.channelBelong" clearable placeholder
                                        class="w200">
                                    <Option v-for="(item,index) in dataDict.channelBelongDict" :key="index"
                                            :value="item.value">{{ item.title }}
                                    </Option>
                                </Select>

                            </FormItem>
                        </Col>
                    </Row>
                </Col>

                <Col span="24">
                    <div class="contract-close-btns">
                        <Button type="primary" @click="handleSubmit('formValidate')" icon="ios-search"
                                style="margin-right:16px">搜索
                        </Button>
                        <Button type="primary" @click="handleReset('formValidate')" icon="ios-trash-outline">重置</Button>
                    </div>
                </Col>
            </Form>
        </Row>
    </div>
</template>
<script>
export default {
    props: {
        formValidate: {
            type: Object,
            required: true
        },
        dataDict: {
            type: Object,
            required: true
        },
        loading: {
            type: Boolean,
            required: true,
            default: true
        },
    },
    data() {
        return {
            // loading: false,
            modelValueDict: [
                {title: 'A', value: 'A'},
                {title: 'B', value: 'B'},
                {title: 'C', value: 'C'},
                {title: 'D', value: 'D'},
            ],
            createDate: null,
            finishDate: null
        };
    },
    mounted() {
    },
    methods: {
        init() {
        },
        // 查询
        handleSubmit(name) {
            if (this.loading) return;
            this.$refs[name].validate(valid => {
                if (valid) {
                    // this.loading = true;
                    this.$emit("getList", this.formValidate);
                }
            });
        },
        handleReset(name) {
            this.$refs[name].resetFields();
            this.formValidate.condition =  {};
            // this.formValidate.condition.scoreEnd = null;
            // this.formValidate.condition.scoreStart = null
            // this.formValidate.condition.gradeDateStr8 = null
            // this.formValidate.condition.customerManager = null
            // this.formValidate.condition.channelFullName = null
            // this.formValidate.condition.channelCode = null
            // this.formValidate.condition.scoreStart = null
            // this.formValidate.condition.scoreEnd = null
            // this.formValidate.condition.businessType = null
        },
        openModal() {
            this.$emit("showModal", true);
        },

    }
};
</script>
<style scoped lang="less">
.contract-close-btns {
    padding-bottom: 28px;
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: center;
}

.scoreRange {
    width: 200px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    > div {
        width: 90px;
    }
}
</style>
